/*指定编码集：utf-8,通配选择器页面元素统一
                   文本设定16px,字体家族，微软雅黑
				   超链接、列表样式去掉、盒子模型：
				   默认存在外边框
给父元素添加效果：宽高500*200  边框：1px
给所有的子元素添加效果：宽高100*100 背景色、字体大小自定	
			         字体垂直居中、所有子元素左浮动
					每一个子元素必须元素不同	  

*/
@charset "utf8";

*{
	/*字体简写属性*/
	font:16px "微软雅黑" ;
	text-decoration:none;
	list-style-type:none;
	margin:0;
	padding:0;
	
}
 #father{
	 /*浮动卡住：第一步，父元素宽度 498px*/
	width:500px;
	/*塌陷解决方案1 加高 经验*/
	height:200px;
	/*塌陷解决方案2 加溢出 子浮动元素算溢出*/
	overflow:hidden;
	border:10px solid red;
}
/*选择器权值问题，如果不够，给另一个选择器添加效果
 协同给几个元素添加效果
 群组选择器，抓取不同的元素，统一添加效果
 */
div.d1,div.d2,div.d3,div.d4,div.d5{
	width:100px;
	height:100px;
	background:#ffff00;
	/*浮动一定产生问题*/
	float:left;
	font-size:2em;
	text-align:center;
	line-height:100px;
}

div#father div.d1{
	background:#222;
	/*浮动卡住：第二步，d1高*/
}
div#father div.d2{
	background:#ff0000;
}
div#father div.d3{
	background:#00ffff;
}
div#father div.d4{
	background:#ff55ff;
}
div#father div.d5{
	background:#5500ff;
	/*清楚浮动，解决浮动卡住问题：纵向卡住*/
	clear:both;
}